<template>
<div>
<div class="login_wrap">
    <div class="box_wrap">
      <div class="title_wrap">
        任务单自动识别系统
      </div>
      <div class="box">
        <div class="ocr_wrap">
          <!-- <img src="../assets/ocr.png" alt="" width="590px" height="200px"> -->
        </div>
        <div class="btnGroup">
          
          <div class="btn1" @click="gotoExcel">导入电子版电系操作指令票</div><br>
          <div class="btn2" @click="gotoOcr">高拍仪识别</div><br>
          <div class="btn3" @click="gotoAdd">新增操作项</div><br>
          <div class="btn3" @click="gotoShow">查看关键字匹配库</div><br>
          <div class="btn3" @click="gotoModel">查看生成操作票数目</div><br>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
      title="查看生成操作票数目"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <div class="currentDate">当日生成操作票数目：{{today}}</div>
        <div class="currentMonth">本月生成操作票数目：{{count}}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</div>
  

</template>

<script>
export default {
  data () {
    return {
      placeholder_username: '\ue6c0  请输入手机号',
      placeholder_password: '\ue62f  请输入密码',
      username: '',
      password: '',
      dialogVisible: false,
      count: 0,
      today: 0
    }
  },
  methods: {
    gotoExcel() {
      this.$router.push('/upload')
    },
    gotoOcr() {
      this.$router.push('/choose')
    },
    gotoAdd() {
      this.$router.push('/addIndex')
    },
    gotoShow() {
      this.$router.push('/showType')
    },
    gotoModel() {
      this.dialogVisible = true
      this.axios({
        url: '/showStatistics'
      })
      .then(res => {
        console.log(res)
        this.count = res.data.count
        this.today = res.data.today
      })
    },
    handleClose() {

    }
  }
}
</script>

<style lang="scss" scoped>
.login_wrap {
  background:url("../assets/bg.png") no-repeat;
  background-size:cover;
  width:100%;
  height:100%;
  position:fixed;
  margin-top: -8px;
  margin-left: -8px;
  
}

  .title_wrap {
    color: white;
    font-size: 60px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 100px;
  }
  .btnGroup {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
    margin-top: 270px;
  } 
  .btn1, .btn2, .btn3 {
      color: #eee;
      border: 1px solid #ddd;
      display: inline-block;
      padding: 15px 0;
      font-size: 30px;
      border-radius: 7px;
      margin-bottom: 50px;
      background: #333;
      width: 750px;
      text-align: center;
      cursor: pointer;
    }
    .currentDate {
      margin-bottom: 25px;
      font-size: 16px;
    }
    .currentMonth {
      font-size: 16px;
    }
</style>
